<template>
  <!-- 研究成果 -->
  <div class="research-result">
    <div class="search-box">
      <!-- 专利类型 -->
      <el-select
        v-model="value1"
        class="elselect"
        @change="changeValue1"
        size="medium"
        placeholder="成果类型"
      >
        <el-option
          v-for="item in options1"
          :key="item.key"
          :label="item.key"
          :value="item.key"
        >
        </el-option>
      </el-select>
      <!-- 时间 -->
      <div class="date">
        <el-select
          v-model="value2"
          class="elselect"
          @change="changeValue2"
          size="medium"
          placeholder="时间"
        >
          <el-option
            v-for="item in options2"
            :key="item.key_as_string"
            :label="`${item.key_as_string}`"
            :value="item.key_as_string"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <ul class="list">
      <li v-for="(item, index) in listData" :key="index">
        <i class="circle"></i>
        <div class="panel">
          <h4>{{ item.ad }}</h4>
          <div class="box">
            <h3>
              <span class="tit" @click="toDetails(item.pn)">{{
                item.title
              }}</span>
              <span
                class="tag status1"
                :class="{
                  status2:
                    item.legal_status === '驳回' ||
                    item.legal_status === '失效' ||
                    item.legal_status === '撤回',
                }"
                >{{ item.legal_status }}</span
              >
            </h3>
            <p class="patent-number">
              <span class="tit">专利号：</span>{{ item.pn }}
            </p>
            <template v-if="item.abst === '加载中'">
              <p class="abs"><i class="el-icon-loading"></i>{{ item.abst }}</p>
            </template>
            <template v-else>
              <p class="abs">
                {{
                  item.abst && item.abst.length > 150 && !item.toggle
                    ? item.abst.substr(0, 150) + "..."
                    : item.abst
                }}
              </p>
              <span
                v-if="item.abst && item.abst.length > 150"
                class="toggle"
                @click="toggleAbs(item)"
                >{{ item.toggle ? "收起" : "展开" }}</span
              >
            </template>
          </div>
        </div>
      </li>
      <li v-if="listData.length <= 0">
        {{ noData }}
      </li>
    </ul>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="ips"
        :current-page.sync="ipi"
        @current-change="getCurrentPage"
        class="el-pagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      listData: [],
      // 专利类型
      value1: "",
      options1: [],
      // 公开日
      value2: "",
      options2: [],
      ipi: 1,
      ips: 5,
      total: 0,
      noData: "加载中...",
    };
  },
  methods: {
    init() {
      this.getPatentType();
      this.getIsd();
    },
    // 专利类型聚类
    getPatentType() {
      this.$post(this.$Url.team.patentAnalysis, {
        musts: {
          date_sort: "1",
          "in2id.id": this.info.key,
        },
        aggs: {
          type: "base",
          field: "patent_type",
        },
      })
        .then((res) => {
          let data = res.data;
          data = [
            {
              key: "全部",
            },
            ...data,
          ];
          this.options1 = data;
        })
        .catch((err) => {});
    },
    // 公开日聚类
    getIsd() {
      this.$post(this.$Url.team.patentAnalysis, {
        musts: {
          date_sort: "1",
          "in2id.id": this.info.key,
        },
        aggs: {
          interval: "YEAR",
          format: "yyyy",
          field: "ad",
          type: "date",
        },
      })
        .then((res) => {
          let data = res.data;
          let newData = [];
          data.forEach((v) => {
            if (v.doc_count > 0) {
              newData.push(v);
            }
          });
          newData = [
            {
              key_as_string: "全部",
            },
            ...newData,
          ];
          this.options2 = newData;
        })
        .catch((err) => {});
    },
    getData() {
      let param = {
        musts: {
          date_sort: "1",
          "in2id.id": this.info.key,
        },
        ipi: this.ipi,
        ips: this.ips,
        sort: [
          {
            ad: "desc",
          },
        ],
      };

      if (this.value1 !== "" && this.value1 !== "全部") {
        param["musts"]["patent_type"] = this.value1;
      }

      if (this.value2 !== "" && this.value2 !== "全部") {
        let start = this.value2 + "-01-01";
        let end = this.value2 + "-12-31";
        param["rangArr"] = [
          {
            start,
            end,
            field: "ad",
          },
        ];
      }

      this.noData = "加载中...";

      this.$post(this.$Url.team.patentSearch2, param)
        .then((res) => {
          let data = res.data;
          let result = data && data.result;
          if (result.length > 0) {
            result.forEach((v) => {
              v.toggle = false;
              v.abst = "加载中...";
              if (v.legal_status === "") {
                v.legal_status = "其它";
              }
              this.getAbst(v.pn, (abst) => {
                this.$set(v, "abst", abst);
              });
            });
            this.listData = result;
            this.total = data.page.totalRow;
          } else {
            this.listData = [];
            this.total = 0;
            this.noData = "暂无数据";
          }
        })
        .catch((err) => {});
    },
    // 获取摘要
    getAbst(pn, fn) {
      this.$post(this.$Url.patent.basicInfo, {
        sf: "QueryFulltext",
        istype: "1",
        ialist: "1",
        sx: "cn/queryfulltext_cn",
        iclient: "1",
        isClick: 1,
        foo: "SEARCH-MASTER",
        sl: "chs",
        itrans: "1",
        fooShowPN: "null",
        ispage: "100",
        advanceSearchHistory: "false",
        idi: "274766528119",
        sq: `apn/${pn} or pns/${pn}`,
        sqtype: "1",
        ishowAbst: 1,
      })
        .then((res) => {
          let data = res.data;
          if (data.PatentList) {
            let abst = res.data.PatentList[0].abst || "暂无";
            fn && fn(abst);
          }
        })
        .catch((err) => {});
    },
    toDetails(pn) {
      this.$router.push({
        name: "patentDetails",
        query: {
          pn,
          active: 1,
        },
      });
    },
    changeValue1(val) {
      this.ipi = 1;
      this.getData();
    },
    changeValue2(val) {
      this.ipi = 1;
      this.getData();
    },
    toggleAbs(item) {
      item.toggle = !item.toggle;
    },
    getCurrentPage(val) {
      this.ipi = val;
      this.getData();
    },
  },
  watch: {
    info() {
      this.init();
      this.getData();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-input__inner{
  background-color: rgba(3, 179, 140,0.07) !important;
}
.search-box {
  padding: 0 24px;
  margin-top: 10px;
  margin-bottom: 40px;
  .elselect {
    width: 142px;
    margin-right: 30px;
  }
  .date {
    display: inline-flex;
    align-items: center;
    .split {
      display: inline-block;
      padding: 0 5px;
    }
  }
}
.list {
  position: relative;
  padding-left: 0;
  margin-left: 40px;
  margin-right: 30px;
  list-style: none;
  li {
    position: relative;
    padding-left: 36px;
    padding-bottom: 40px;
    border-left: 1px solid $mainColor;
    &:last-of-type {
      padding-bottom: 0;
    }
    .circle {
      position: absolute;
      top: 0;
      left: -5px;
      display: block;
      width: 10px;
      height: 30px;
      background-color: #fff;
      &:before {
        position: absolute;
        top: 10px;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $mainColor;
        content: "";
      }
    }
    .panel {
      position: relative;
      h4 {
        line-height: 30px;
        margin-bottom: 20px;
        font-size: 18px;
        color: $mainColor;
      }
      .box {
        padding: 26px 30px;
        background-color: #f7f9fc;
        h3 {
          margin-bottom: 16px;
          .tit {
            font-size: 20px;
            color: $mainColor;
            cursor: pointer;
          }
          .tag {
            float: right;
            line-height: 28px;
            padding: 0 15px;
            border-radius: 4px;
            font-weight: normal;
            font-size: 14px;
            color: #fff;
            &.status1 {
              background-color: #41b3a2;
            }
            &.status2 {
              background-color: #c44b5c !important;
            }
          }
        }
        .patent-number {
          font-size: 14px;
          color: #4fc9ae;
          .tit {
            display: inline-block;
            width: 65px;
            color: $mainColor;
          }
        }
        .abs {
          margin-bottom: 24px;
          font-size: 14px;
          color: #7674a3;
        }
        .toggle {
          color: #6f6dd8;
          &:hover {
            opacity: 0.8;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.pagination {
  margin: 31px 0;
  text-align: center;
}
</style>
